<template>
  <div
    style="
      width: 1200px;
      margin: 0 auto;
      height: calc(100vh - 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 20px 0px;
    "
  >
    <!-- <el-button @click="goBack" style="margin: 10px;">返回</el-button> -->

    <!-- <div class="page-header">
            <router-link class="back-link" to="/main/renshi/renshidiaodong">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link>
            <h1>员工离职</h1>
        </div> -->
    <!-- 离职相关类 -->
    <div class="category-card">
      <div class="category-header">
        <span
          style="
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
          "
        >
          <router-link class="back-link" to="/main/renshi/renshidiaodong">
            <!-- <i></i> -->
            <span style="color: #fff" class="el-icon-arrow-left"> 返回 </span>
          </router-link>
        </span>
        <span
          style="display: flex; align-items: center; justify-content: center"
        >
          <i class="el-icon-user-solid"></i>
          <h3>员工离职</h3>
        </span>
      </div>
      <div class="link-list">
        <router-link
          class="link-item"
          to="/main/renshi/renshizhidu/lizhisqd/lizhisqd"
        >
          <i class="el-icon-user-solid"></i>
          <span>职员/员工离职申请表</span>
        </router-link>
        <router-link
          class="link-item"
          to="/main/renshi/renshizhidu/yglizhi/yglizhi"
        >
          <i class="el-icon-document"></i>
          <span>员工离职程序二联单</span>
        </router-link>
        <router-link
          class="link-item"
          to="/main/renshi/renshizhidu/ygligangdjb/ygligangdjb"
        >
          <i class="el-icon-notebook-1"></i>
          <span>员工离岗登记表</span>
        </router-link>
        <router-link
          class="link-item"
          to="/main/renshi/renshizhidu/lizhizm/lizhizm"
        >
          <i class="el-icon-document-copy"></i>
          <span>离职证明</span>
        </router-link>
        <router-link
          class="link-item"
          to="/main/renshi/renshidiaodong/lizhibanfa/lizhibanfa"
        >
          <i class="el-icon-notebook-2"></i>
          <span>离职管理办法</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.push("/main/renshi/renshidiaodong");
    },
  },
};
</script>

<style scoped lang="scss">
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  width: 800px;
  margin: 0px auto 20px auto;

  .back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409eff;
    margin-right: 20px;
    transition: all 0.3s;

    i {
      margin-right: 5px;
    }

    &:hover {
      opacity: 0.8;
    }
  }

  h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #303133;
  }
}

.category-card {
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  width: 848px;
  margin: 0 auto;
  height: 494.4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);

  .category-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 30px;
    background: linear-gradient(135deg, #409effbd, #66b1ffbf);
    color: white;
    justify-content: center;

    i {
      font-size: 20px;
      margin-right: 8px;
    }

    h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
    }
  }

  .link-list {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(1, 2fr);
    gap: 20px;
    height: 360px;

    .link-item {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #606266;
      padding: 12px;
      border-radius: 4px;
      transition: all 0.3s ease;
      margin-bottom: 8px;
      border: 1px solid #409eff;
      width: 65%;
      margin: 0 auto;

      i {
        font-size: 16px;
        margin-right: 8px;
        color: #409eff;
        font-family: "宋体";
      }

      span {
        flex: 1;
        font-size: 18px;
      }

      small {
        color: #909399;
        font-size: 12px;
        margin-left: 8px;
      }

      &:hover {
        background-color: #ecf5ff;
        color: #409eff;
        transform: translateX(5px);
      }

      &:last-child {
        // margin-bottom: 0;
      }
    }
  }
}
</style>